<template>
  <main class="home">
    <div style="display:flex;margin:0 auto;width: 1024px;
    position: relative;">
      <aside class="aside_bar">
        <ul>
          <li>
            <router-link to="/version">开发环境</router-link>
          </li>
          <li>
            <router-link to="/alert">弹出框</router-link>
          </li>
          <li>
            <router-link to="/button">按钮</router-link>
          </li>
          <li>
            <router-link to="/card">card布局</router-link>
          </li>
          <li>
            <router-link to="/dateTime">日期时间</router-link>
          </li>
        </ul>
      </aside>
      <section class="content">
        <router-view class="router-view"></router-view>
      </section>
    </div>
  </main>
</template>

<script>
import { mapState } from "vuex";
import * as api from "../api/api";
import { showMsg } from "../http/http";
import * as fitter from "../filters/filter";

export default {
  name: "Home",
  data() {
    return {};
  },
  computed: {
    ...mapState({
      // tableData: state => state.userInfo, // 表格数据
      count: "count",
      staffID: "staffID",
    }),
  },
  methods: {},
  created() {},
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
.home {
  padding-top: 100px;
  display: flex;
}
.aside_bar {
  width: 200px;
  height: 700px;
  overflow-y: scroll;
  position: fixed;
  top: 100px;
  left: calc((100% - 1300px) / 2);
  top: 100px;
}
li,
a {
  height: 40px;
  text-decoration: none;
}
a:hover {
  cursor: pointer;
  color: #409eff;
}
a {
  color: #2c3e50;
  font-size: 14px;
}
.content {
  width: 800px;
  padding-bottom: 100px;
  padding-left: 100px;
  padding-right: 10px;
}
// li:active {

// }
</style>
